<template>
  <transition name="slide">
    <div class="locationMask" v-show="isShow">
      <div class="address-selector">
        <div class="select-area-panel">
        <span class="select-area-panel__item"
              v-for="(item, key) in areaCollect"
              :key="areaCollect.code"
              @click="stepBack(key)">
          {{item.name}}
          <i v-if="key === areaCollect.length - 1" class="active-line"></i>
        </span>
          <i class="close-btn" @click="hide"></i>
        </div>
        <ul class="area-toggle-container">
          <li class="area-toggle-item"
              v-for="(item, key) in areaData"
              v-if="item.name !== '市辖区'"
              :key="key"
              @click="selectArea(key)">
            {{item.name}}
          </li>
        </ul>
      </div>
    </div>
  </transition>
</template>

<script>
  import area from './area';

  export default {
    name: "select-area",
    data() {
      return {
        areaData: area,
        areaCollect: [{name: '请选择'}],
      }
    },
    computed: {},
    methods: {
      selectArea(index) {
        let currentArea = this.areaData[index];
        this.areaCollect.splice(-1, 0, {name: currentArea.name, code: currentArea.code});
        if(currentArea.pchilds && currentArea.pchilds.length === 1){
          this.areaData = currentArea.pchilds[0].cchilds;
        }else{
          this.areaData = currentArea.pchilds || currentArea.cchilds || this.selected();
        }
      },
      hide() { this.$emit('update:isShow', false) },
      selected() {
        this.hide();
        // console.log(this.areaCollect);
        let res = (this.areaCollect.reduce(function (prev, current, key, arr) {
          if(key < arr.length - 1){
            prev.name += " " + current.name;
            return prev;
          }else {
            return prev.name;
          }
        }, {name: ''}));
        this.$emit('input', res);  /*那边数据绑定相当于@input然后这边emit把数据发射出去*/
        this.areaCollect = [{name: '请选择'}];
        return area;
      },
      stepBack(index) {   /*回退*/
        let self = this;
        this.areaCollect.splice(index);
        this.areaCollect.push({name: '请选择'});
        function getValue(arr, i) {
          if (i === index) {
            return arr;
          }else{
            return getValue(arr.filter(value => value.code === self.areaCollect[i].code)[0].pchilds, ++i)
          }
        }
        this.areaData = getValue(area, 0);
      }
    },
    props: {
      isShow: {
        type: Boolean,
        default: false
      }
    }
  }
</script>

<style lang="scss" scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .locationMask{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(76,76,76,.6);
    z-index: 9999999;
  }
  .address-selector{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid #ccc;
    color: #999;
    z-index: 999;
    background: white;
    .select-area-panel{
      height: 80px;
      line-height: 70px;
      font-size: 0;
      color: #353535;
      .select-area-panel__item{
        display: inline-block;
        font-size: 28px;
        text-align: center;
        margin: 0 20px;
        box-sizing: border-box;
        position: relative;
        transition: all .2s ease-in-out;
        .active-line{
          width: 100%;
          height: 4px;
          background: #3c9dfc;
          position: absolute;
          left: 0;
          bottom: -1px;
        }
      }
      .close-btn{
        position: absolute;
        top: 15px;
        right: 8px;
        display: inline-block;
        width: 60px;
        height: 60px;
        background-image: url("");
      }
    }
    .area-toggle-container{
      height: 50vh;
      list-style: none;
      overflow: auto;
      .area-toggle-item{
        line-height: 80px;
        border-bottom: 1px solid #ccc;
        padding-left: 20px;
        box-sizing: border-box;
        font-size: 23px;
      }
    }
  }
  .slide-enter{
    bottom: -60vh;
  }
  .slide-enter-active{
    transition: all .2s ease-in-out;
  }
  .slide-enter-to{
    bottom: 0;
  }
  .slide-leave{
    bottom: 0;
  }
  .slide-leave-active{
    transition: all .2s ease-in-out;
  }
  .slide-leave-to{
    bottom: -60vh;
  }
</style>

